<template>
  <a-row :gutter="5">
    <a-col :span="4">
      <!-- :id="id" :type="type" -->
      <LeftTree
        title="数据表列表"
        :id="databaseId"
        ref="leftTree"
        :isload="isload"
        @selected="getTreeData"
        @getTree="hadleGetTreeList"
      ></LeftTree>
    </a-col>
    <a-col :span="20">
      <a-card style="overflow: auto; height: 100%">
        <div class="table-page-search-wrapper">
          <a-form layout="inline" @keyup.enter.native="searchQuery">
            <a-row :gutter="24">
              <a-col :md="6" :sm="8">
                <a-form-item label="字段英文名称">
                  <a-input placeholder="请输入字段英文名称" v-model="queryParam.fieldName"></a-input>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <a-form-item label="字段中文名称">
                  <a-input placeholder="请输入字段中文名称" v-model="queryParam.fieldAnnotation"></a-input>
                </a-form-item>
              </a-col>
              <a-col :md="6" :sm="8">
                <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
                  <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                  <!-- <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">清除条件</a-button> -->
                  <a-button type="primary" style="margin-left: 8px" @click="handleModelPublish">源数据采集</a-button>
                  <!-- <a @click="handleToggleSearch" style="margin-left: 8px">
                    {{ toggleSearchStatus ? '收起' : '展开' }}
                    <a-icon :type="toggleSearchStatus ? 'up' : 'down'" />
                  </a> -->
                </span>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <!-- table区域-begin -->
        <div>
          <!--      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">-->
          <!--        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{-->
          <!--        selectedRowKeys.length }}</a>项-->
          <!--        <a style="margin-left: 24px" @click="onClearSelected">清空</a>-->
          <!--      </div>-->
          <a-table
            ref="table"
            size="middle"
            bordered
            rowKey="id"
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            :loading="loading"
            @change="handleTableChange"
          >
            <span slot="title2" slot-scope="text">
              <j-ellipsis :value="text" :length="20" />
            </span>
            <!-- <span slot="actionName">
              <a-button size="small" @click="handleAdd('元数据增加')" type="primary" icon="plus">新增字段</a-button>
            </span> -->
            <span slot="action" slot-scope="text, record">
              <a @click="handleTableUpdate(record)">修改</a>
              <!-- <a-divider type="vertical" />
              <a @click="handleEdit(record, '元数据采集-表信息')">表详情</a> -->
            </span>
          </a-table>
        </div>
        <!-- table区域-end -->
        <CheckAndEditModel
          :nodeData="treeNodeData"
          :modelOpts="treeList"
          ref="modalForm"
          @ok="modalFormOk"
        ></CheckAndEditModel>
        <create
          ref="creatModel"
          :modelId="modelId"
          @submited="
            () => {
              this.loadData()
              this.isload = !this.isload
            }
          "
        ></create>
      </a-card>
    </a-col>
  </a-row>
</template>
<script>
// 表头
import LeftTree from './LeftTree'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import CheckAndEditModel from './CheckAndEditModel'
import JEditor from '@/components/jeecg/JEditor'
import columns from './indexColumns'
import { httpAction } from '@/api/manage'
import create from './create.vue'
import { postAction } from '@/api/manage'

export default {
  name: 'indexModel',
  mixins: [JeecgListMixin],
  components: {
    LeftTree,
    CheckAndEditModel,
    JEditor,
    create,
  },
  props: ['databaseId'],
  data() {
    return {
      queryParam: {},
      superParam: {
        advType: '1',
      },
      id: '',
      treeNodeData: {},
      treeList: [],
      // 表头
      columns: columns(this),
      url: {
        list: '/metaDataCollect/collectFieldPage',
        // delete: '/metaDataModel/delMetaDataField',
        collect: '/metaDataCollect/collectField',
      },
      modelId: '',
      dataSource: [],
      isload: false,
    }
  },
  computed: {},
  methods: {
    getTreeData(data) {
      this.queryParam.tableId = data.id
      this.modelId = data.id
      this.treeNodeData = data
      this.loadData()
    },
    handleTableUpdate(record) {
      this.$refs.creatModel.edit(record)
      this.$refs.creatModel.visible = true
    },
    handleModelPublish() {
      if (this.queryParam.tableId) {
        postAction(this.url.collect, { tableId: this.queryParam.tableId, databaseId: this.databaseId }).then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.loadData()
          } else {
            this.$message.error(res.message)
          }
        })
      } else {
        this.$message.error('请选择元数据模型')
      }
    },
    hadleGetTreeList(data) {
      this.treeList = data
    },
    handleAdd: function (name) {
      if (this.queryParam.modelId) {
        this.$refs.modalForm.add()
        this.$refs.modalForm.title = name
        this.$refs.modalForm.isCheck = false
        this.$refs.modalForm.disableSubmit = false
      } else {
        this.$message.error('请选择元数据模型')
      }
    },
  },
  created() {},
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
<style lang="less" scoped>
.ant-row {
  height: 100%;

  .ant-col {
    height: 100%;

    .ant-card {
      height: 100%;

      /deep/ .ant-card-body {
        padding: 15px;
      }
    }
  }
}
</style>